<template>
    <a-drawer v-model:open="open" title="权限分配" :width="420">
        <form-item label="角色名称" layout="vertical" class="margin-bottom">
          <a-input :value="data.name" disabled name="name" autocomplete="off"/>
        </form-item>
        <form-item label="权限列表" layout="vertical">
            <use-permission v-model:selected-keys="permissions"/>
        </form-item>
      <template #footer>
        <a-flex justify="end" :gap="12">
          <a-button @click="open = false">取消</a-button>
          <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
        </a-flex>
      </template>
    </a-drawer>
</template>

<script lang="ts" setup>
import FormItem from '@/components/FormItem.vue'
import UsePermission from "@/views/admin/permission/components/UsePermission.vue";
import {ref, watch} from "vue";
import {useRoleStore} from "@/store/modules/organization/role.ts";
import useMessage from "@/utils/useMessage.ts";

const open = defineModel<boolean>('open', { default: false })
const data = defineModel<PermissionRole>('data', { default: () =>{}})
const permissions = ref<string[]>([])
const loading = ref<boolean>(false)
const roleStore = useRoleStore()
const handleOk = async () => {
  loading.value = true
  try {
    const form = Object.assign(data.value, {permissions})
    const res = await roleStore.update(form)
    if (res){
      open.value = false
      permissions.value = []
    }
  } catch (error) {
    useMessage(500,'err'+error ||'权限分配失败');
  }finally {
    setTimeout(()=>loading.value = false,3000)
  }
}
watch(()=>data.value,()=>{
  permissions.value = data.value.permissions
})
</script>

<style scoped>

</style>